<template>
	<div>
		<jk-search-select
			:placeholder="placeholder"
			:only-key="onlyKey"
			:query-name="queryName"
			:size="size"
			class="width-100-percent"
			:params-data="ruleForm"
			:query-search-async="querySearchAsync"
			@on-select="handleSelect"
			@on-click-icon="onSelectEmpIcon"
		></jk-search-select>

		<select-emp-dialog
			:dialog-state="selectEmpDialogState"
			@on-confirm="onConfirmBtnOfSelectEmpDialog"
			@on-visible-change="onVisibleChangeOfSelectEmpDialog"
		></select-emp-dialog>
	</div>
</template>
<script>
    import selectEmpDialog from './radio-select-emp-dialog';
    import { getEmpPage } from '../../../../../api/system/emp';
    import { pageConfig } from '../../../../../utils/jk/jk-tool';

    export default {
        props: {
            formData: {
                type: Object,
                default() {
                    return {};
                }
            },
            onlyKey: { // 外部与optionKey关联绑定的字段名
                type: String,
                default: 'productId'
            },
            queryName: { // 搜索的字段
                type: String,
                default: 'productName'
            },
            /* querySearchAsync: {
                type: Function,
                default() {
                    return () => {};
                }
            },*/
            size: {
                type: String,
                default: 'medium'
            },
            placeholder: {
                type: String,
                default: '人员'
            }
        },
        components: { selectEmpDialog },
        data() {
            return {
                selectEmpDialogState: false,
                ruleForm: {}
            };
        },
        methods: {
            querySearchAsync(queryString) {
                return getEmpPage({
                    onJob: true,
                    nameOrCode: queryString,
                    pageNo: 1,
                    pageSize: pageConfig.remotePageSize
                }).then(res => {
                    if (res.data.status === 200) {
                        return res.data.res.map(x => {
                            return {
                                value: x.name,
                                ...x
                            };
                        });
                    }
                });
            },
            handleSelect(item) {
                this.$emit('on-select', item);
            },
            onVisibleChangeOfSelectEmpDialog(e) {
                this.selectEmpDialogState = e;
            },
            onConfirmBtnOfSelectEmpDialog(e) {
                if (Object.keys(e).length) {
                    this.$emit('on-select', e);
                    this.selectEmpDialogState = false;
                }
            },
            onSelectEmpIcon() {
                this.selectEmpDialogState = true;
            }
        },
        watch: {
            formData: {
                handler(newVal) {
                    this.ruleForm = JSON.parse(JSON.stringify(newVal));
                },
                deep: true,
                immediate: true
            }
        }
    };
</script>
